<template>
<div class="background_style">
<div class=" text-center mt-5 fs-2">
    校园答疑平台
</div>
 <el-form :model="login" class="border w-50 mx-auto mt-5">
    <el-form-item>
      <div class="border w-100 text-center h-200 fs-5"> <router-link to="/registry" class="a">快速注册 </router-link> 快速登录</div>
    </el-form-item>

    <el-form-item class=" text-end w-50 mx-auto mt-5" label="用户名：" >
      <el-input v-model="login.username" placeholder="用户名" class="ms-auto" style="width:19rem"></el-input>
    </el-form-item>

    <el-form-item class=" text-end w-50 mx-auto mt-5" label="密码：" >
      <el-input v-model="login.password" placeholder="密码"  class="ms-auto" style="width:19rem"></el-input>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" class="mx-auto mt-5" @click="loginAction">登录</el-button>
    </el-form-item>
  </el-form>
 </div>
</template>

<script>
import auth from '@/tools/auth.js'
export default {
  name:"LoginFrame",
  data(){
    return {
      login: {
        username: null,
        password: null,
      },
    };
  },
  mounted(){
    auth.logout();
  },
  methods:{
    loginAction(){
      this.$axios.post('/api/login',this.login)
      .then(response =>{
        let data = response.data;
        if(data.code == 200){
          let token = data.data;
          auth.saveToken(token)
          this.$router.push('/homeheader')
        }else{
          alert(data.msg)
        }
      })
    }
  }

}
</script>

<style scoped>
.background_style{
width:100%;
height:100%;
position:fixed;
background-size:100% 100%;
background-repeat: no-repeat;
background-image: url("@/assets/zjuc.webp");
}
.a{
   text-decoration: none;
}


</style>